<!DOCTYPE html>
<html lang="zh-CN" style="color-scheme: dark;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MeverikC - Product Designer</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="shortcut icon" href="./assets/public/m.ico"/>
    <script src="js/http_unpkg.com_typed.js@2.0.16_dist_typed.umd.js"></script>
    <!-- Google tag (gtag.js) 追蹤網站中的事件 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-P3D1E12CH1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-P3D1E12CH1');
    </script>
</head>
<body>
    <canvas class="fireworks"></canvas>
    <div class="head">
        <div class="main">
            <a href="./index.html" class="logo"><img width="100" src="./assets/public/MFIKC_.png" alt=""></a>
            <div class="menu">
                <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                <!-- <li class="magical btn" onclick="window.location.href='./work.html'">Work</li> -->
                 <li class="magical btn" onclick="window.location.href='./blog.html'">Blog</li>
                <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
                <li class="magical btn" onclick="window.location.href='./timeline.html'">时间轴</li>
            </div>
            <div class="menu" id="menu-expand">
                <li class="magical btn skin" id="menu-expand-child"><i class="icon menu-icon"></i></li>
            </div>
            <div id="menu-panel">
                <div class="menu-panel-content">
                    <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                    <!-- <li class="magical btn" onclick="window.location.href='./work.html'">Work</li> -->
                     <li class="magical btn" onclick="window.location.href='./blog.html'">Blog</li>
                    <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
                    <li class="magical btn" onclick="window.location.href='./timeline.html'">时间轴</li>
                </div>
            </div>
        </div>
        <blockquote><img src="./assets/public/logo.svg" alt=""></blockquote>
    </div>
    <div class="index">
        <div class="hello">
            <div class="title">
                <div class="title-hi">Hi, I'm</div>
                <a class="title-name" href="http://meverikc.top:8080/">MeverikC</a>
            </div>
            <div class="hello-desc" id="typed"></div>
        </div>
        <div class="content-divider"></div>
        <div class="quickly-link">
            <div class="title-hi">Mini Games</div>
            <div class="loader"></div>
            <div class="link-card">
                <!--<div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="https://convertio.co/zh" target="_blank">
                            <img src="./assets/index/Convertio.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Convertio</div>
                                <div class="info-desc">图标转换工具</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://qingicon.com" target="_blank">
                            <img src="./assets/index/qingicon.png" alt="">
                            <div class="info">
                                <div class="info-title">QingIcon</div>
                                <div class="info-desc">2200+ 填充、双色图标</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.figma.com/community/plugin/1111565622161029659" target="_blank">
                            <img src="./assets/index/figicon.png" alt="">
                            <div class="info">
                                <div class="info-title">Figicon</div>
                                <div class="info-desc">Figma 图标库插件</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.figma.com/community/plugin/1286263811056993042" target="_blank">
                            <img src="./assets/index/rpb.png" alt="">
                            <div class="info">
                                <div class="info-title">RPB</div>
                                <div class="info-desc">替换 Figma 页面背景</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://adapter.biliui.com" target="_blank">
                            <img src="./assets/index/adapter.png" alt="">
                            <div class="info">
                                <div class="info-title">Q-Adapter</div>
                                <div class="info-desc">B端产品布局适配</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://biliui.com" target="_blank">
                            <img src="./assets/index/biliui.png" alt="">
                            <div class="info">
                                <div class="info-title">Biliui</div>
                                <div class="info-desc">第一代博客</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://nav.dippermap.com/" target="_blank">
                            <img src="./assets/index/dippermap.png" alt="">
                            <div class="info">
                                <div class="info-title">Dippermap</div>
                                <div class="info-desc">开源 GIS 导航工具</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div> -->
                <div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9001" target="_blank">
                            <img src="./assets/index/snake.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Snake Game</div>
                                <div class="info-desc">贪吃蛇</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9002" target="_blank">
                            <img src="./assets/index/tetris.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Tetris</div>
                                <div class="info-desc">俄罗斯方块</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9003" target="_blank">
                            <img src="./assets/index/2048.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">2048 Game</div>
                                <div class="info-desc">2048 游戏</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9003" target="_blank">
                            <img src="./assets/index/fruit.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Cut Fruit</div>
                                <div class="info-desc">切水果</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9003" target="_blank">
                            <img src="./assets/index/flappy-bird.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Flappy Bird</div>
                                <div class="info-desc">飞翔的小鸟</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="http://meverikc.top:9003" target="_blank">
                            <img src="./assets/index/chinese-chess_white.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Chinese Chess</div>
                                <div class="info-desc">象棋</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 8V0H4.5V8H3.5Z" fill="#62616F"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.5H0V3.5H8V4.5Z" fill="#62616F"></path>
                </svg>
                <div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="https://gitee.com/MeverikC" target="_blank">
                            <img src="./assets/index/gitee.png" style="width: 13% !important;" alt="">
                            <div class="info">
                                <div class="info-title">Gitee</div>
                                <div class="info-desc">我的代码</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://github.com/" target="_blank">
                            <img src="./assets/index/github.png" alt="">
                            <div class="info">
                                <div class="info-title">Github</div>
                                <div class="info-desc">我的代码</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://meverikc.github.io/" target="_blank">
                            <img src="./assets/index/m_white.ico" style="width: 10% !important;" alt="">
                            <div class="info">
                                <div class="info-title">MFIKC</div>
                                <div class="info-desc">我的分享博客</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            <div>© 2024 Design by <a href="http://meverikc.top:8080/" target="_blank">MeverikC</a></div>
             <span>|</span>
            <div class="fillings">
                豫ICP备2024091188号
            </div>
            <!-- <span>|</span> -->
            <!-- <div class="fillings">
                <a href="http://meverikc.top:8080/" target="_blank">MeverikC</a>
            </div>
            <span>|</span>
            <div class="friends">
                <a href="http://meverikc.top:8080/" target="_blank">ZDO</a>
            </div> -->
        </div>
    </div>
    <div class="widget">
        <div class="shape-light"></div>
        <div class="shape-star">
            <div class="rising-stars rising-stars-visible">
                <div style="height:1px;width:1px"></div>
                <div style="height:2px;width:2px"></div>
                <div style="height:1px;width:1px"></div>
            </div>
        </div>
        <div class="shape-earth"></div>
    </div>
</body>
<script>
    // 打字效果，感谢 typed.js: https://mattboldt.github.io/typed.js/docs/
    const options = {
        strings: [
            ">_ welcome to my secret garden ^1000",
            ">_ and let's explore it now ^1000",
        ],
        typeSpeed: 50, // 打印速度
        backSpeed: 20, // 回退速度
        startDelay: 300, // 开始之前的延迟300毫秒
        loop: true, // 是否循环
        showCursor: false, // 不显示光标
    };
    const typed = new Typed('#typed', options);
</script>
<script>
    // 保存原始标题
    const originalTitle = document.title;

    // 指定失去焦点时的标题
    const newTitles = [
        '(=・ω・=) 我还在等你！',
        '(#`Д´)ﾉ 嗯？',
        '(╬☉д⊙) 你去哪了？'
    ];

    const backTitles = [
        '(｢･ω･)｢ 欢迎回来！',
        '(´ー`) 嗯!',
        '(ﾉ>ω<)ﾉ 这才是你该待的地方！'
    ];

    // 获取一个随机的新标题
    function getRandomTitle() {
        const randomIndex = Math.floor(Math.random() * newTitles.length);
        return newTitles[randomIndex];
    }

    function getBackTitle() {
        const randomIndex = Math.floor(Math.random() * backTitles.length);
        return backTitles[randomIndex];
    }

    // 监听页面失去焦点事件
    window.addEventListener('blur', function() {
        document.title = getRandomTitle() // 修改为指定的标题
    });

    // 监听页面获得焦点事件
    window.addEventListener('focus', function() {
        document.title = getBackTitle(); // 恢复原始标题
    });
</script>
<script src="./js/main.min.js"></script>
<script src='./js/anime.js'></script>
<script src='./js/firework.js'></script>
</html>